<template>
	<view class="task-list">
		<view class="item" v-for="(item, index) in taskList" :key="item.name">
			<view class="left-wrap">
				<image class="icon" :src="item.icon"></image>
				<view>
					<view>
						<text>{{item.title}}</text>
						<text>+3积分</text>
					</view>
					<text>{{item.brief}}</text>
				</view>
			</view>
			<view class="right-wrap">
				<view class="btn" :class="buildClassName(item, index)" @click="clickButton(item, index)">
					{{ item.status === 'SUCCESS' ? item.buttonName[1] : item.buttonName[0] }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TaskList',
    props: {
      list: Array
    },
		data() {
			return {
				taskList: [
          {
            title: '领券点外卖',
            brief: '领取红包后跳转外卖平台下单',
            status: 'UNFINISHED',
            buttonName: ['点外卖', '已完成'],
            icon: '/static/icons/task_icon1.png'
          },{
            title: '邀请新用户',
            brief: '通过右方按钮邀请，每天10次',
            status: 'UNFINISHED',
            buttonName: ['去邀请', '已完成'],
            icon: '/static/icons/task_icon2.png'
          },{
            title: '购物领返佣',
            brief: '首页搜索淘宝、京东、拼多多商品并领券购买',
            status: 'SUCCESS',
            buttonName: ['去购物', '已完成'],
            icon: '/static/icons/task_icon3.png'
          }
        ],
        isOpen: false,
				_rewardedVideoAd: ''
			}
		},

		methods: {
			clickButton(item, index){
        switch(item.taskType) {
					case 'TAKEWAY':
						break;
					case 'SHOPPING':
						break;
				}
			},
      buildClassName(item, index) {
        let itemClass = ''
        if(item.status === 'SUCCESS') {
          itemClass = 'btn-complete'
        }
        return itemClass
      },
      goPage(url) {
        uni.navigateTo({
          url
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.task-list {
		overflow: hidden;
		font-weight: 500;
    
    .title {
      display: block;
      line-height: 1;
      color: #fff;
      font-size: 36upx;
      font-weight: 500;
      font-style: italic;
    }

		.item {
			width: 100%;
			height: 160upx;
      padding: 0 46upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin-bottom: 20upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			box-sizing: border-box;
      border: 1px solid #F6DEB8;

			.left-wrap {
				display: flex;
        align-items: center;
				position: relative;

				.icon {
					width: 96upx;
					height: 96upx;
				}

				>view {
					width: 330upx;
					margin-left: 23upx;

					>view {
						height: 31upx;
						line-height: 31upx;
            display: flex;
            align-items: center;

						text {

							&:first-of-type {
								color: #333;
								font-size: 32upx;
								font-weight: 500;
							}

							&:last-of-type {
								color: #FF1C44;
								font-size: 24upx;
								font-weight: 500;
								margin-left: 20upx;
                position: relative;
                top: -1upx;
							}
						}
					}

					>text {
						width: 340upx;
						color: #666;
						font-size: 24upx;
						line-height: 32upx;
						display: block;
						margin-top: 13upx;
					}
				}
			}

			.right-wrap {

				.btn {
					width: 134upx;
					height: 54upx;
					line-height: 54upx;
					text-align: center;
					background: linear-gradient(90deg, #FE3667, #FF2F25);
					border-radius: 27upx;
					color: #fff;
					font-size: 28upx;
					margin-top: 8upx;
					box-sizing: border-box;
          float: right;

					&.btn-complete {
						line-height: 51upx;
						color: #FF3030;
						background: transparent;
						border: 1px solid #FF3030;
					}
				}
			}
		}
	}
</style>
